<template>
  <div class="content">
    <el-form ref="form" :rules="rules" :model="accountLoginForm" label-width="60">
      <el-form-item label="账号" prop="userId">
        <el-input v-model="accountLoginForm.userId" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="accountLoginForm.password" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <el-button  @click="login" type="primary">立即登录</el-button>
      <div class="account-operation">
        <el-checkbox v-model="isRecordPassword" label="记住密码"></el-checkbox>
        <el-link  type="primary">立即注册</el-link>
      </div>
    </el-form>
  </div>
</template>

<script>
import router from '@/router'
import { ElMessage } from 'element-plus'
import { reactive,ref } from 'vue'
// import { accountLoginRules } from '../config/rules'
export default{
  name:'AccountLogin',
  setup() {
    const accountLoginForm = ref({
      userId: '',
      password: ''
    })
    const form = ref()
    const isRecordPassword = ref(true)
    const rules = reactive({
      userId:[{
        required:true,
        message:"账号不存在,请输入!",
        type:"string",
        trigger:"blur"
      }],
      password:[{
        required:true,
        message:"密码错误,请重试!",
        type:"string",
        trigger:"blur"
      }]
    })
    const login = () =>{
      form.value?.validate((validate)=>{
        if (validate && accountLoginForm._value.userId == "tornado" && accountLoginForm._value.password == "JayChou"){
          router.push('/');
          localStorage.setItem('token',true)
        }else{
          ElMessage.error('请输入正确的账号和密码噢!')
        }
      })
    }
    return {accountLoginForm,isRecordPassword,login,form,rules}
  }
}


</script>

<style lang="less" scoped>
.content {
  width: 100%;

  .el-button {
    width: 100%;
    height: 40px;
  }

  .account-operation {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>
